<template>
    <transition name="ph-notify-fade">
        <div :class="cns" :style="style" v-if="visible">
            <icon v-if="type&&iconType" class="ph-notify-icon" :icon="iconType"/>
            <div class="ph-notify-wrap">
                <h1 class="ph-notify-title">
                    <span>{{title}}</span>
                    <icon v-if="closable" @click="close(true)" class="ph-close" icon="close"/>
                </h1>
                <p :class="['ph-notify-body',clickable?'ph-pointer':'']" @click="click">{{content}}</p>
            </div>
        </div>
    </transition>
</template>
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, PropType, ref } from 'vue'
import { NotifyPosition } from './index.type'
export default defineComponent({
    components:{
        Icon:defineAsyncComponent(()=>import("../base/icon.vue"))
    },
    props:{
        position:{
            type: String as PropType<NotifyPosition>,
            default:"right-bottom"
        },
        type:{
            type:String
        },
        icon:String,
        title:String,
        closable:Boolean,
        autoClose:Boolean,
        content:String,
        clickable:Boolean,
        onClose:Function,
        onClick:Function
    },
    setup(props) {
        const visible = ref(false)
        const y = ref("")
        const cns = computed(()=>{
            return {
                'ph-notify':true,
                'ph-notify-right':props.position.startsWith("right"),
                'ph-notify-left':props.position.startsWith("left"),
                'ph-notify-success':props.type==="success",
                'ph-notify-danger':props.type==="danger",
                'ph-notify-info':props.type==="info",
                'ph-notify-warning':props.type==="warning"
            }
        })
        const style = computed(()=>{
            const Y = props.position.split("-")[1]
            return {
                [Y]:y.value
            }
        })
        const iconType = computed(()=>{
            if(props.icon)return props.icon
            switch(props.type){
                case "success":return "check-circle";
                case "warning":return "warning";
                case "danger":return "times-circle";
                case "info":return "info-circle"
            }
            return ""
        })
        const show = (top:string)=>{
            visible.value = true
            y.value = top
            if(props.autoClose){
                setTimeout(()=>{
                    close()
                },10000)
            }
        }
        const close = (manu?:boolean)=>{
            if(visible.value){
                visible.value = false
                props.onClose&&props.onClose(manu)
            }
        }
        const click = ()=>{
            if(!props.clickable)return
            props.onClick&&props.onClick()
            close()
        }
        return {cns,style,visible,iconType,show,close,click}
    },
})
</script>
<style lang="scss" scoped>
.ph-notify-fade-enter-from.ph-notify-right,
.ph-notify-fade-leave-to.ph-notify-right {
    right:0;
    transform: translateX(100%)
}
.ph-notify-fade-leave-from.ph-notify-right,
.ph-notify-fade-enter-to.ph-notify-right {
    transform: translateX(0%)
}
.ph-notify-fade-leave-active.ph-notify-right {
	opacity: 0;
}

.ph-notify-fade-enter-from.ph-notify-left,
.ph-notify-fade-leave-to.ph-notify-left {
    left:0;
    transform: translateX(-100%)
}
.ph-notify-fade-leave-from.ph-notify-left,
.ph-notify-fade-enter-to.ph-notify-left {
    transform: translateX(0%)
}
.ph-notify-fade-leave-active.ph-notify-left {
	opacity: 0;
}

.ph-notify{
    position: fixed;
    backface-visibility: hidden;
    display: flex;
    width: var(--ph-notify-width);
    padding: var(--ph-15) var(--ph-20);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px var(--ph-fs-small) 0 rgb(0 0 0 / 10%);
    transition: opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;
    overflow: hidden;
    color: var(--ph-c);
    z-index:10100;
    font-size: var(--phx);
    .ph-pointer{
        &:hover{
            color: var(--ph-theme);
        }
    }
    &-wrap{
        flex:1;
    }
    --ph-notify-icon:inherit;
    &-success{
        --ph-notify-icon:var(--ph-success);
    }
    &-danger{
        --ph-notify-icon:var(--ph-danger);
    }
    &-info{
        --ph-notify-icon:var(--ph-info);
    }
    &-warning{
        --ph-notify-icon:var(--ph-warning);
    }
    &-icon{
        color: var(--ph-notify-icon);
        font-size: calc(var(--phx) * 1.9285);
        width: auto;
        margin-right: var(--ph-10);
        flex:0 0 auto;
    }
    &-title{
        font-size: inherit;
        font-weight: bold;
        position:relative;
    }
    .ph-close{
        position: absolute;
        right: 0;
        cursor:pointer;
        &:hover{
            color: var(--ph-c-d1);
        }
    }
    &-left{
        left: var(--phx);
    }
    &-right{
        right: var(--phx);
        transform: translateX(0);
    }
}
@media screen and (max-width: 480px) {
    .ph-notify{
        left:0;
        right:0;
        margin: auto;
    }
}
</style>
